<template>
	<!-- 商品详情页 -->
	<scroll-view class="container" scroll-y="true" @scroll="pageScroll">
		<view class="title-contents" :class="headerActive?'act':''">
			<!--  #ifdef APP-PLUS -->
			<view class="top-view status" style="background: rgba(255,255,255,0)"></view>
			<!--  #endif -->
			<view class="_top titles">
				<view class="titleLeftButton" @click="back()"><text class="iconfont icon-fanhui"></text></view>
				<view class="titleText">
					<view class="title-item active">商品</view>
					<view class="title-item">详情</view>
					<view class="title-item">评论</view>
				</view>
				<view class="titleRightButton"><text class="iconfont icon-gouwuche2"></text></view>
			</view>
		</view>
		<view class="firstPart" id="">
			<!-- 轮播图 -->
			<view class="swiper-wrapper">
				<swiper indicator-dots="true" indicator-color="#666" indicator-active-color="#fff" autoplay="true" circular="true">
					<swiper-item v-for="item in productlist.banner"><image :src="item"/></swiper-item>
				</swiper>
			</view>
			<view class="goods-info">
				<view class="goods-price">
					<text class="price">
						<text>￥</text>
						{{productlist.price}}
					</text>
					<text class="through-price">￥{{productlist.old_price}}</text>
				</view>
				<view class="goods-like" @click="list_like" >
					<!-- 已收藏的图标 -->
					<view v-if="pro.is_fav==1">
						<svg t="1676348522584" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3311" width="24" height="24"><path d="M335.008 916.629333c-35.914667 22.314667-82.88 10.773333-104.693333-25.557333a77.333333 77.333333 0 0 1-8.96-57.429333l46.485333-198.24a13.141333 13.141333 0 0 0-4.021333-12.864l-152.16-132.586667c-31.605333-27.52-35.253333-75.648-8.234667-107.733333a75.68 75.68 0 0 1 51.733333-26.752L354.848 339.2c4.352-0.362667 8.245333-3.232 10.026667-7.594667l76.938666-188.170666c16.032-39.2 60.618667-57.92 99.52-41.461334a76.309333 76.309333 0 0 1 40.832 41.461334l76.938667 188.16c1.781333 4.373333 5.674667 7.253333 10.026667 7.605333l199.712 16.277333c41.877333 3.413333 72.885333 40.458667 69.568 82.517334a76.938667 76.938667 0 0 1-26.08 51.978666l-152.16 132.586667c-3.541333 3.082667-5.141333 8.074667-4.021334 12.853333l46.485334 198.24c9.621333 41.013333-15.36 82.336-56.138667 92.224a75.285333 75.285333 0 0 1-57.525333-9.237333l-170.976-106.24a11.296 11.296 0 0 0-12.010667 0l-170.986667 106.24z" fill="#fdd100" p-id="3312"></path></svg>
					</view>
					<!-- 未收藏的图标 -->
					<view v-else>
						<svg t="1676348522584" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3311" width="24" height="24"><path d="M335.008 916.629333c-35.914667 22.314667-82.88 10.773333-104.693333-25.557333a77.333333 77.333333 0 0 1-8.96-57.429333l46.485333-198.24a13.141333 13.141333 0 0 0-4.021333-12.864l-152.16-132.586667c-31.605333-27.52-35.253333-75.648-8.234667-107.733333a75.68 75.68 0 0 1 51.733333-26.752L354.848 339.2c4.352-0.362667 8.245333-3.232 10.026667-7.594667l76.938666-188.170666c16.032-39.2 60.618667-57.92 99.52-41.461334a76.309333 76.309333 0 0 1 40.832 41.461334l76.938667 188.16c1.781333 4.373333 5.674667 7.253333 10.026667 7.605333l199.712 16.277333c41.877333 3.413333 72.885333 40.458667 69.568 82.517334a76.938667 76.938667 0 0 1-26.08 51.978666l-152.16 132.586667c-3.541333 3.082667-5.141333 8.074667-4.021334 12.853333l46.485334 198.24c9.621333 41.013333-15.36 82.336-56.138667 92.224a75.285333 75.285333 0 0 1-57.525333-9.237333l-170.976-106.24a11.296 11.296 0 0 0-12.010667 0l-170.986667 106.24z" fill="#cdcdcd" p-id="3312"></path></svg>
					</view>
					
				</view>
				<view class="goods-title">{{productlist.name}}</view>
				<view class="sales">
					<text>快递:包邮</text>
					<text>月销{{productlist.sales}}</text>
				</view>
			</view>
		</view>

		<view class="evaluate" @click="go_comment">
			<view class="evaluate_title">
				<view class="title_name">
					<text>评价</text>
					<text>{{goods_comment_count}}</text>
				</view>
				<view class="title_goto">
					<text>查看更多</text>
					<text class="iconfont icon-qianwang"></text>
				</view>
			</view>
			<view class="evaluate_con" v-if="!goods_comment_count==0">
				<view class="con_title">
					<image :src="goods_comment.userInfo.avatar" mode="" style="box-shadow: 0 0 5px 0.5px #e8e8e8;"></image>
					<text class="Name">{{goods_comment.userInfo.nickname}}</text>
				</view>
				<view class="con_con">{{goods_comment.content}}</view>
				<view class="con_img" v-if="goods_comment.images"><image :src="goods_comment.images" mode=""></image></view>
			</view>
			<view v-if="goods_comment_count==0" style="text-align: center;padding-bottom: 10px;color: #666666;">
				暂无评论
			</view>
		</view>

		<view class="goods-detail">
			<view class="title">
				<view class="title_name"><text>图文详情</text></view>
			</view>
			<view class="content"><image :src="productlist.img" mode="widthFix"></image></view>
		</view>
		<view class="footer">
			<view class="btn cart" @click="maskshow(buy=false)">加入购物车</view>
			<view class="btn buy" @click="maskshow(buy=true)" >立即购买</view><!-- navTo('/pages/order/createOrder') -->
		</view>
		<view class="mask" :style="carshow ? 'display: block;' : ''" style="display: none;" @click="close"></view>
		<view class="mask-content" :style="carshow ? 'display: block;' : ''" style="display: none;">
			<view class="header">
				<view class="title">
					<image :src="productlist.img" mode=""></image>
					<text>
						<text>￥</text>{{addlist.price}}
						<text>库存</text>{{addlist.stock}}
					</text>
				</view>
				<image src="/static/images/common/close.png" mode="" @click="close"></image>
			</view>
			<view v-for="(item,indexo) in productlist.attr" :key="indexo">
				<view class="choose-title">{{item.text}}</view>
				<scroll-view class="type-view" scroll-y>
					<view class="list">
						<view class="item" @click="change(indexo,indext)" :class="item.index==indext? 'active' : ''" v-for="(val,indext) in item.values" :key="indext">{{val.text}}</view>
					</view><!-- item.index==indext看新定义的index等不等于indext这个小的索引 等就高亮 -->
				</scroll-view>
			</view>

			<view class="goods-number">
				<text>数量</text>
				<view class="goods-number-button">
					<button @click="reduce">-</button><input type="text" :value="count"><button @click="add">+</button>
				</view>
			</view>
			<view class="choose-footer" @click="carprpduct(addcart,buy)">确定</view><!-- :data-probuy="addcart" -->
		</view>
	</scroll-view>
</template>

<script>
import numberBox from '../../components/numberbox/numberbox.vue';
export default {
	components: {
		numberBox
	},
	data() {
		return {
			headerActive: false,
			productlist:"",
			goods_id:"",
			addcart:"",//加入购物车的 购物车id
			// changeIndex:[0,0],//切换默认选中索引 为0
			count:1,//数量
			carshow:false,//控制 弹出层是否显示
			buy:'',//参 用来区分点的是加入购物车还是立即购买
			addlist:[],//新建数组 用来放点击的规格  价钱和库存
			sku:[],//默认规格[颜色,款式]
			pro:[],//收藏
			goods_comment:[],//评论列表(只放第一个评论)
			goods_comment_count:'',//评论的总数量
			host:'https://4de16698-d9f4-443a-b416-ef1037cce952.bspapp.com/http'
		};
	},
	onLoad(options) {
		console.log(options.goods_id);
		this.goods_id=options.goods_id;
		console.log(this.goods_id)
	},
	mounted() {
		this.productList();
		this.commentList()
	},
	methods: {
		//监控页面滚动,控制头部变色
		pageScroll(e) {
			this.headerActive = e.target.scrollTop >= 60;
		},
		// 实现切换功能
		change(indexo,indext) {
			// console.log()
			this.productlist.attr[indexo].index = indext//index这个是 在indexo里添加的index 要把小的indext赋给index
			this.$forceUpdate()//强制更新
			console.log(this.productlist.attr[indexo].values[indext].text);//输出当前点击的内容 数据
			// console.log(this.sku);
			this.sku.splice(indexo,1,this.productlist.attr[indexo].values[indext].text)//用splice进行数据修改 输出点击的颜色和款式 进行更改
			console.log(this.sku);
			
			uni.request({
				method:'POST',
				url: this.host + '/api/get_sku',
				data:{
					goods_id:this.goods_id,
					sku:this.sku
				},
				success:(res) => {
					console.log(res);
					this.addlist=res.data.data
				}, //请求成功回调，带参数
				fail: () => {
					console.log('请求失败');
				} //请求失败
			});
			
		},
		// 列表 详情
		productList(){
			uni.request({
				method:'POST',
				url:this.host+'/api/get_goods_detail',
				data:{
					goods_id:this.goods_id
				},
				dataType: 'json',
				success:(res)=>{
					console.log(res);
					res.data.data[0].attr = res.data.data[0].attr.map((v)=>{
						return{//v当前元素的值
							...v,//当前元素的所有的值
							index:0//因为有多个 attr嵌套 索引要加一个index (在indexo里加一个index)
						}
					})//map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值
					this.addlist=res.data.data[0].default_sku_info,
					console.log(this.addlist);
					this.sku=res.data.data[0].default_sku_info.text,
					console.log(this.sku);
					
					this.productlist=res.data.data[0]
					
					this.pro=res.data
					console.log(this.pro);
					
				},//请求成功回调，带参数
				fail:()=>{
					console.log("请求失败")
				}//请求失败
			})
		},
		// 收藏
		list_like(){
			let uid=uni.getStorageSync('uid')
			let token = uni.getStorageSync('token');
			uni.request({
				method:'POST',
				url:this.host+'/api/toggle_fav',
				header: {
					'token': this.token
				},
				data:{
					goods_id:this.goods_id,
					uid,
					is_fav:this.pro.is_fav
				},
				dataType: 'json',
				success:(res)=> {
					console.log(res);
					uni.$u.toast(res.data.msg)
					if(this.pro.is_fav==0){
						this.pro.is_fav=1
					}else{
						this.pro.is_fav=0
					}
					this.$forceUpdate()//强制更新
				},
				fail:()=>{
					console.log("请求失败")
				}//请求失败
			})
		},
		// 购物车的弹出层
		maskshow(){
			if(this.carshow==false){
				this.carshow=true
			}else{
				this.carshow=false
			}
			// console.log(this.carshow)
		},
		// 购物车  //确定按钮
		carprpduct(){
			let uid=uni.getStorageSync('uid')
			
			// 立即购买
			uni.request({
				method:'POST',
				url:this.host+'/api/add_cart',
				data:{
					uid,
					goods_id:this.goods_id,
					num:this.count,
					attr:this.sku,//规格 根据上面的this.sku 来赋值
					type:this.buy?'buy':''
				},
				dataType: 'json',
				success:(res)=>{
					console.log(res)
					
					if(res.data.code==2012){
						uni.$u.toast('请先登录')
						uni.navigateTo({
							url: '/pages/public/login'
						});
						return false
					}
					
					this.addcart=res.data.data.id
					console.log(this.addcart);
					
					if(res.data.code==1){
						uni.$u.toast(res.data.msg)
						// console.log(this.buy);
						if(this.buy){
							uni.navigateTo({
								// url:'/pages/order/createOrder?cart_id='+this.addcart 
								url:`/pages/order/createOrder?cart_id=${this.addcart}&buy=${this.buy}`
							})
							return false
						}
						return false
					}
					
				},//请求成功回调，带参数
				fail:()=>{
					console.log("请求失败")
				}//请求失败
			})
		},
		// 关闭弹出层
		close(){
			this.carshow=false
			this.buyshow=false
		},
		// 数量 加
		add(){
			this.count++
			// console.log(this.count);
		},
		// 数量 减
		reduce(){
			this.count--
			if(this.count<=0){
				this.carshow=false;
				this.count=1;
			}
		},
		// 总金额
		sum(){
			return this.count*this.productlist.price
		},
		// 评价列表
		commentList(){
			uni.request({
				method:'POST',
				url:this.host+'/api/get_goods_comment',
				data:{
					goods_id:this.goods_id,
					skip:0, //分页开始数
					limit:1 //一次给几条
				},
				success:(res)=>{
					console.log(res)
					this.goods_comment_count=res.data.count
					this.goods_comment={...res.data.data[0]}
					console.log(this.goods_comment_count);
					console.log(this.goods_comment);
				}
			})
		},
		// 跳转到 评论页
		go_comment(){
			uni.navigateTo({
				url:`/pages/product/comment?goods_id=${this.goods_id}`
			})
		}
	}
};
</script>

<style lang="scss">
.goods-number{
	.goods-number-button{
		width: 30%;
		display: flex;
		justify-content: space-around;
		
		button{
			width: 40px;
			height: 40px;
			line-height: 40px;
			text-align: center;
		}
		input{
			width: 40px;
			height: 40px;
			line-height: 40px;
			text-align: center;
		}
	}
}
page {
	width: 100%;
	height: 100%;
	background-color: #f5f5f7;
	
	.container {
		background-color: #f5f5f7;
		height: 100%;
		.title-contents {
			position: fixed;
			top: 0;
			width: 100%;
			height: calc(var(--status-bar-height) + 88upx);
			z-index: 1000;
			background: rgba(255, 255, 255, 0);
			.top-view {
				width: 100%;
				height: var(--status-bar-height);
			}

			&.act {
				background: rgba(255, 255, 255, 1);
				border-bottom: 1px solid #eee;
				 .titles .titleRightButton .iconfont {
					color: #fff;
				}
				 .titles .titleLeftButton .iconfont {
					color: #fff;
				}
				 .titles .titleText{
					 opacity: 1;
				 }
			}

			.titles {
				display: flex;
				flex-direction: row;
				justify-content: center;
				height: 88upx;
				.mp-titleLeftButton {
					width: 88upx;
					height: 88upx;
				}
				.titleLeftButton {
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 14upx;
					width: 60upx;
					height: 60upx;
					line-height: 60upx;
					text-align: center;
					border-radius: 50%;
					background: rgba(0, 0, 0, 0.5);
					.iconfont {
						font-size: 16px;
						color: #fff;
					}
				}

				.titleText {
					display: flex;
					justify-content: space-around;
					align-items: center;
					width: 574upx;
					height: 88upx;
					margin: 0 auto;
					opacity: 0;
					.title-item {
						position: relative;
						height: 88upx;
						line-height: 88upx;
						font-size: 36upx;
						color: #666;
						&.active {
							color: #000;
							&::after {
								position: absolute;
								bottom: 0;
								left: 50%;
								content: ' ';
								margin-left: -25upx;
								width: 50upx;
								height: 6upx;
								background: $theme-color;
							}
						}
					}
				}

				.titleRightButton {
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 14upx;
					width: 60upx;
					height: 60upx;
					line-height: 60upx;
					text-align: center;
					border-radius: 50%;
					background: rgba(0, 0, 0, 0.5);
					color: #fff;
					.iconfont {
						font-size: 19px;
						color: #fff;
					}
				}
			}
		}

		.firstPart {
			.swiper-wrapper {
				/*  #ifdef  MP-WEIXIN  */
				min-height: 88upx;
				/*  #endif  */
				width: 100%;
				/*  #ifndef  MP-WEIXIN  */
				min-height: calc(var(--status-bar-height) + 88upx);
				/*  #endif  */
				swiper {
					width: 100%;
					height: 750upx;
					image {
						width: 100%;
						height: 750upx;
					}
				}
			}
			.seckill {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				padding: 0 25upx;
				box-sizing: border-box;
				width: 100%;
				height: 100upx;
				background: #fb5248;
				.goods-price {
					display: flex;
					flex-direction: row;
					align-items: center;
					height: 100upx;
					.price {
						font-size: 44upx;
						color: #fff;
						text {
							font-size: 28upx;
						}
					}
					view {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 24upx;
						padding: 20upx 0;
						box-sizing: border-box;
						font-size: 22upx;
						color: #fff;
						.through-price {
							text-decoration: line-through;
						}
					}
				}
				.progress-wrapper {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 16upx 0 22upx;
					height: 100upx;
					box-sizing: border-box;
					font-size: 22upx;
					color: #fee900;
				}
			}
			.goods-info {
				padding: 0 25upx;
				box-sizing: border-box;
				background: #fff;
				overflow: hidden;
				position: relative;
				.goods-price {
					line-height: 84upx;
					.price {
						font-size: 36upx;
						color: #fb5248;
						text {
							font-size: 24upx;
						}
					}
					.through-price {
						margin-left: 30upx;
						font-size: 22upx;
						color: #999;
						text-decoration: line-through;
					}
				}
				.goods-like{
					width: 24px;
					height: 24px;
					line-height: 24px;
					position: absolute;
					right: 20px;
					top: 5px;
				}
				.goods-title {
					margin-top: 20upx;
					line-height: 42upx;
					font-size: 32upx;
					color: #111;
				}
				.sales {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 84upx;
					font-size: 24upx;
					color: #666;
				}
			}
		}
		.coupon {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 90upx;
			margin: 20upx 0 0;
			background-color: #fff;
			padding: 0 25upx;
			box-sizing: border-box;
			font-size: 28upx;
			color: #666;
			.title {
				text {
					&:nth-child(2n) {
						margin-left: 30upx;
						color: #111;
					}
					&:last-child {
						color: #fb5248;
					}
				}
			}
			.get-coupon {
				text {
					padding: 2upx 8upx;
					box-sizing: border-box;
					background: rgba(251, 82, 72, 0.1);
					color: #fb5248;
					border-radius: 6upx;
				}
			}
		}
		.spec {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20upx;
			height: 74upx;
			background-color: #fff;
			padding: 0 25upx;
			box-sizing: border-box;
			font-size: 28upx;
			color: #666;
			&.delivery {
				margin-top: 0;
			}
			.title {
				text {
					&:last-child {
						margin-left: 30upx;
						color: #111;
					}
				}
			}
			.arrow {
				.iconfont {
					color: #999;
					font-size: 12px;
				}
			}
		}
		.evaluate {
			margin: 20upx 0;
			padding: 0 25upx;
			box-sizing: border-box;
			background-color: #fff;
			.evaluate_title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 84upx;
				overflow: hidden;
				.title_name {
					font-size: 30upx;
					font-weight: bold;
				}
				.title_goto {
					font-size: 24upx;
					color: #666;
					.iconfont {
						margin-left: 10upx;
						font-size: 24upx;
					}
				}
			}
			.evaluate_con {
				padding-bottom: 20upx;
				box-sizing: border-box;
				font-size: 28upx;
				.con_title {
					image {
						width: 60upx;
						height: 60upx;
						border-radius: 50%;
					}
					.Name {
						display: inline-block;
						vertical-align: top;
						margin-top: 10upx;
						margin-left: 15upx;
					}
				}
				.con_img {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					align-items: center;
					margin-top: 20upx;
					image {
						margin-right: 20upx;
						margin-bottom: 15upx;
						width: 160upx;
						height: 160upx;
						border-radius: 5px;
						&:last-child {
							margin-right: 0;
						}
					}
				}
			}
		}
		.all-comment {
			.evaluate_list {
				background-color: #fff;
				padding: 20upx 25upx 0;
				box-sizing: border-box;
				.list_title {
					overflow: hidden;
					_zoom: 1;
					.list_left {
						image {
							width: 60upx;
							height: 60upx;
							border-radius: 50%;
						}
						.list_left_con {
							display: inline-block;
							margin-left: 10px;
							font-size: 24upx;
							.time {
								color: #999999;
								margin-top: 10upx;
							}
						}
					}
				}
				.list_text {
					font-size: 28upx;
					padding: 10px 0;
				}
				.list_img {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					align-items: center;
					image {
						margin-bottom: 15upx;
						width: 160upx;
						height: 160upx;
						border-radius: 5px;
						margin-right: 15upx;
					}
				}
				.list_btm {
					overflow: hidden;
					_zoom: 1;
					padding: 10px 0;
					.btm_left {
						float: left;
						font-size: 24upx;
						color: #666666;
					}
					.btm_right {
						float: right;
						font-size: 24upx;
						color: #666;
						.comment {
							width: 90upx;
							height: 40upx;
							line-height: 36upx;
							border-radius: 20upx;
							text-align: center;
							border: 1px solid #666;
							display: inline-block;
							margin-right: 10px;
						}
						.Give {
							width: 130upx;
							height: 40upx;
							line-height: 36upx;
							border-radius: 20upx;
							text-align: center;
							border: 1px solid #666;
							display: inline-block;
						}
					}
				}
			}
		}
		.goods-detail {
			margin: 0 0 94upx;
			padding: 0 25upx 100upx;
			box-sizing: border-box;
			background-color: #fff;
			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 84upx;
				overflow: hidden;
				.title_name {
					font-size: 30upx;
					font-weight: bold;
				}
			}
			.content {
				font-size: 0;
				image {
					width: 100%;
				}
			}
		}
		.margin-t {
			/*  #ifdef  APP-PLUS  */
			margin-top: calc(var(--status-bar-height) + 88upx);
			/*  #endif  */
			/*  #ifndef  APP-PLUS  */
			margin-top: 88upx;
			/*  #endif  */
		}
		.footer {
			position: fixed;
			bottom: 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
			height: 94upx;
			background: #fff;

			.btn {
				width: 50%;
				line-height: 94upx;
				text-align: center;
				background: $theme-color;
				font-size: 34upx;
				color: #fff;
				&.buy {
					background: #fb5248;
					color: #fff;
				}
			}
		}
		.mask {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.5);
			z-index: 10008;
		}
		.mask-content {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			// height: 1020upx;
			background: #fff;
			z-index: 10009;
			.header {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding: 0 25upx;
				box-sizing: border-box;
				height: 150upx;
				.title {
					image {
						margin-top: 0;
						position: relative;
						top: -50upx;
						width: 200upx;
						height: 200upx;
						vertical-align: middle;
					}
					text {
						margin-top: -20upx;
						margin-left: 30upx;
						color: #fb5248;
						font-size: 36upx;
						text {
							font-size: 29upx;
						}
					}
				}
				image {
					margin-top: 30upx;
					width: 40upx;
					height: 40upx;
				}
			}
			.choose-title {
				margin-top: 25upx;
				padding: 0 25upx;
				overflow: hidden;
				box-sizing: border-box;
				font-size: 28upx;
				color: #666;
			}
			.type-view {
				padding: 0 25upx;
				box-sizing: border-box;
				max-height: 150upx;
				.list {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					.item {
						margin-top: 18upx;
						margin-right: 24upx;
						padding: 0 32upx;
						box-sizing: border-box;
						height: 56upx;
						line-height: 56upx;
						border-radius: 28upx;
						background: #f6f5f5;
						color: #323232;
						font-size: 28upx;
						&.active {
							color: #fb5248;
							background: rgba(251, 82, 72, 0.1);
						}
					}
				}
			}
			.goods-number {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 20upx;
				margin-bottom: 120upx;
				padding: 0 25upx;
				box-sizing: border-box;
				height: 88upx;
				text {
					font-size: 28upx;
					color: #666;
				}
			}
			.choose-footer {
				position: absolute;
				bottom: 0;
				width: 100%;
				line-height: 94upx;
				color: $text-color;
				background: $theme-color;
				text-align: center;
				font-size: 34upx;
			}
		}
	}
}
</style>
